<template>
	<div class="bottomWrap">
		<!-- <p>我是底部</p> -->
		<div :class="{active: '/' + item.children[0].path === $route.path}"
		class="item" v-for="(item, index) in list" :key="index" @click="toPage(item.children[0].path)">
			<img :src="'/' + item.children[0].path === $route.path ? item.meta.icon_sl:item.meta.icon" >
			{{ item.meta.title}}
		</div>
	</div>
</template>

<script>
	export default {
		name: 'bottomNav',
		computed:{
			list() {
				return this.$router.options.routes.filter(item => !item.meta.hidden);
			}
		},
		methods:{
			toPage(path) {
				if('/' + path ==  this.$route.path){
					return
				}
				this.$router.push(path)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bottomWrap{
		height: 120px;
		width: 100vw;
		position: fixed;
		bottom: 0;
		display: flex;
		.item{
			flex: 1;
			img{
				width: 40px;
				display: block;
				margin: 0 auto;
			}
		}
	}
	.active{
		color: #deb887;
	}
</style>
